<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="component">
			<ol>
				<!--为每个 todo-item 提供 todo对象 , todo对象 是变量，即其内容可以是动态的。 -->
				<todo-item 
					v-for="item in groceryList" 
					v-bind:todo="item" 
					v-bind:id="item.id"></todo-item>
			</ol>
		</div>
	</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	

<script>
	Vue.component('todo-item',{
		// todo-item 组件现在接受一个, "prop"，类似于一个自定义 attribute。这个 prop 名为 todo。
		props: ['todo'],
		template: '<li> {{todo.text}} </li>'
	})
	
	var component = new Vue({
		el: '#component',
		data: {
			groceryList: [
			{'id':202107021547, 'text':'iphone'},
			{'id':202107021548, 'text':'oppo'}
		]}
	})
</script>
</html>
